<template>
  <div style="padding: 24px 0">
    <router-link style="margin-left: 24px" :to="{ path: '/survey/index' }"
      ><a-button>考勤组设置</a-button></router-link
    >
    <router-link :to="{ path: '/survey/setting?groupId=1' }"
      ><a-button>添加考勤组</a-button></router-link
    >
    <router-link :to="{ path: '/survey/attstatistics' }"
      ><a-button>考勤统计管理</a-button></router-link
    >
    <router-link :to="{ path: '/survey/record' }"
      ><a-button>打卡记录</a-button></router-link
    >
    <router-link :to="{ path: '/survey/details' }"
      ><a-button>列表点击详情</a-button></router-link
    >
    <router-link :to="{ path: '/apply/index' }"
      ><a-button>老师调代课</a-button></router-link
    >
    <router-link :to="{ path: '/rota/index' }"
      ><a-button>值班表</a-button></router-link
    >
    <div class="attendance-tit">考勤组设置</div>
    <div class="line"></div>

    <div class="body">
      <div class="search-row">
        <div class="search-input">
          <div class="search-tit">考勤组名称：</div>
          <a-input-search
            class="search-desc"
            placeholder="请输入"
            enter-button
            @search="onSearch"
          />
        </div>
        <router-link :to="{ path: '/survey/setting' }">
          <a-button type="primary">
            <a-icon type="plus" />
            添加考勤组
          </a-button>
        </router-link>
      </div>
      <a-table
        :columns="columns"
        :data-source="list"
        :rowKey="(record) => record.id"
        class="table"
        ref="table"
      >
        <span slot="groupStatus" slot-scope="scope, record">
          <a-switch
            @click="statusSwitch(record)"
            :checked="record.groupStatus === 1 ? true : false"
          />
        </span>
        <span slot="leaderParams" slot-scope="scope">
          <div v-if="scope[0]">{{ scope[0].userName }}</div>
          <div v-else>{{ "无" }}</div>
        </span>
        <span slot="memberParams" slot-scope="scope">
          {{ scope.length }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-if="record.groupStatus == 1" @click="editClick">修改</a>
          <a v-else
            ><router-link
              :to="{
                path: '/survey/setting',
                query: {
                  groupId: record.id,
                  leaderParams: record.leaderParams,
                  memberParams: record.memberParams,
                },
              }"
            >
              修改
            </router-link></a
          >
          <a-divider type="vertical" />
          <a @click="showConfirm(record.id)">删除</a>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
import { getGPS } from "@/api/clock";

const columns = [
  {
    title: "考勤组名称",
    dataIndex: "groupName",
  },
  {
    title: "负责人",
    dataIndex: "leaderParams",
    scopedSlots: { customRender: "leaderParams" },
  },
  {
    title: "考勤人数",
    dataIndex: "memberParams",
    scopedSlots: { customRender: "memberParams" },
  },
  {
    title: "状态",
    dataIndex: "groupStatus",
    scopedSlots: { customRender: "groupStatus" },
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
  },
];
import {
  list,
  samplelist,
  oaattendancegroupmember,
  attgroupStatus,
  remove,
} from "@/api/clock";
export default {
  data() {
    return {
      columns,
      visible: false,
      list: [],
      groupStatus: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      list().then((response) => {
        this.list = response.data;
      });
    },
    onSearch(e) {
      samplelist({ groupName: e })
        .then((response) => {
          this.list = response.data;
        })
        .catch(() => {});
    },
    hideModal() {
      console.log("确定");
    },
    showModal() {
      console.log("确定");
      this.visible = true;
    },
    showConfirm(id) {
      this.$confirm({
        title: "是否删除该考勤分组？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          console.log("OK");
          remove(id)
            .then((response) => {
              this.getList();
            })
            .catch(() => {});
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "test",
      });
    },
    confirm() {
      this.$error({
        title: "是否删除考勤分组",
        // content: 'Bla bla ...',
        okText: "确认",
        cancelText: "取消",
      });
    },
    editClick() {
      this.$message.error("不能修改启用状态的考勤组");
    },
    statusSwitch(record) {
      console.log("record: ", record);
      record.groupStatus = record.groupStatus == 0 ? 1 : 0;
      attgroupStatus({
        id: record.id,
        groupStatus: record.groupStatus,
      })
        .then((response) => {
          if (record.groupStatus == 1) {
            this.$message.success("考勤组开启成功");
          } else {
            this.$message.success("考勤组关闭成功");
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped="scoped" lang="scss">
.body {
  padding: 24px;
  .search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .search-input {
      display: flex;
      align-items: center;
      .search-tit {
        font-size: 14px;
        color: #333333;
      }
      .search-desc {
        width: 200px;
      }
    }
    .add-grouping {
    }
  }

  .table {
    margin-top: 24px;
  }
}
</style>
